/* eslint-disable */
import { createElement, TdHTMLAttributes, useState, type FC } from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { calendarCellDefaultProps } from './defaultProps';
import type { CalendarCellOptions } from './type';

export interface CalendarCellProps extends CalendarCellOptions, TdHTMLAttributes<HTMLTableCellElement> {}

const CalendarCell: FC<CalendarCellProps> = (props) => {
  const {
    className,
    active,
    belongTo,
    date,
    day,
    formattedDate,
    isCurrent,
    weekOrder,
    filterDate,
    formattedFilterDate,
    mode,
    isShowWeekend,
    ...calendarCellProps
  } = props;
  const [focus, setFocus] = useState(false);

  return createElement(
    'td',
    {
      className: classNames(
        'link',
        { disabled: mode === 'day' && belongTo !== 0, today: isCurrent, focus, active },
        className,
      ),
      onMouseEnter: () => setFocus(true),
      onMouseLeave: () => setFocus(false),
      ...calendarCellProps,
    },
    (mode === 'day' && date?.getDate()) ||
      (mode === 'month' && dayjs(date).format('MMMM')) ||
      (mode === 'year' && dayjs(date).get('year')),
  );
};

CalendarCell.displayName = 'CalendarCell';
CalendarCell.defaultProps = calendarCellDefaultProps;

export default CalendarCell;
